<template>
  <div class="add-product">
    <h3>添加商品</h3>
    <form @submit.prevent="handleAddProduct">
      <div class="form-group">
        <label for="name">商品名称:</label>
        <input type="text" id="name" v-model="goodsName" placeholder="请输入商品名称" required />
      </div>
      <div class="form-group">
        <label for="price">价格 (¥):</label>
        <input type="number" id="price" v-model="price" required min="0" step="0.01" placeholder="请输入商品价格" />
      </div>
      <div class="form-group">
        <label for="description">详细介绍:</label>
        <textarea rows="4" id="description" v-model="description" placeholder="请输入商品的简短描述" required></textarea>
      </div>
      <div class="form-group">
        <label for="image">商品图片:</label>
        <input type="file" id="image" @change="handleImageUpload" accept="image/*" />
      </div>
      <div v-if="imagePreview" class="image-preview">
        <img :src="imagePreview" alt="Image Preview" />
      </div>
      <BaseButton variant="primary" size="large" type="submit">添加商品</BaseButton>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import BaseButton from '../components/BaseButton.vue'
import axios from '@/axios'

const goodsName = ref('')
const price = ref('')
const description = ref('')
const detailedDescription = ref('')
const image = ref(null)
const imagePreview = ref(null)
const imageFileName = ref('')

// 处理图片上传
const handleImageUpload = async (event) => {
  const file = event.target.files[0]
  if (file) {
    image.value = file
    imagePreview.value = URL.createObjectURL(file)

    // 上传图片
    const formData = new FormData()
    formData.append('file', file)

    try {
      const response = await axios.post('/files/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })

      // 获取上传文件的文件名
      imageFileName.value = response.data.data // 假设返回的是图片文件名
    } catch (error) {
      console.error('图片上传失败:', error)
    }
  }
}

// 添加商品
const handleAddProduct = async () => {
  // 处理商品添加逻辑，确保图片上传成功并获取到图片文件名
  if (!imageFileName.value) {
    alert('请先上传商品图片')
    return
  }

  try {
    const productData = {
      goodsName: goodsName.value,
      productImage: imageFileName.value, // 使用图片的文件名
      description: description.value,
      price: price.value
    }

    const response = await axios.post('/product/add', productData, {
      headers: {
        'Content-Type': 'application/json'
      }
    })

    if (response.data.code === 0) {
      alert('商品添加成功')
    }
    // 清除表单
    goodsName.value = ''
    price.value = ''
    description.value = ''
    detailedDescription.value = ''
    image.value = null
    imagePreview.value = null
    imageFileName.value = ''
  } catch (error) {
    console.error('商品添加失败:', error)
  }
}
</script>

<style scoped>
.add-product {
  height: 100vh;
  width: 70%;
  margin: var(--spacing-large) auto;
  padding: var(--spacing-large);
}

.add-product h3 {
  text-align: center;
  margin-bottom: var(--spacing-large);
  color: var(--primary-color);
}

.form-group {
  margin-bottom: var(--spacing-large);
  display: flex;
  flex-direction: column;
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-small);
  font-weight: 600;
  color: var(--text-color);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-small);
  border: 1px solid #bdc3c7;
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
  box-sizing: border-box;
  transition: border-color 0.3s;
  scrollbar-width: none;
  resize: none;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--secondary-color);
  outline: none;
}

.image-preview {
  text-align: center;
  margin-bottom: var(--spacing-large);
}

.image-preview img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

/* 使用 BaseButton 组件 */
button {
  width: 100%;
  padding: var(--spacing-small);
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: var(--font-size-large);
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: var(--secondary-color);
}

@media (max-width: 768px) {
  .add-product {
    padding: var(--spacing-base);
    margin: var(--spacing-small) auto;
  }
}
</style>
